<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="<%=basePath%>Js/jquery.js"></script>
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/mycss/bootstrap.min.css" />
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<script type="text/javascript">

//添加房型
function addRoomtype(){
	
	var housetype = $("#housetype").val();
	var peple = $("#peple").val();
	var price = $("#price").val();
	var bed = $("#bed").val();
	var remarks = $("#remarks").val();
	
	if(housetype == "" || peple == "" || price == "" || bed == ""){
		alert("输入有空值")
	}else{
		$.ajax({
			type:"post",
			url:"addRoomtype.do",
			async: false,
			data:{
				"housetype":housetype,
				"peple":peple,
				"price":price,
				"bed":bed,
				"remarks":remarks,
			},
			dataType:"text",
			success:function(result){
				
				if(result == "1"){
					alert("添加房型成功")
					
				}else if(result == "2"){
					alert("房型已存在")
				}else{
					alert("添加失败")
				}
				
			},
			error:function(){
				alert("系统故障")
			}
		})
	}	
}

function deleteRoomType(id){
	
	$.ajax({
		type:"post",
		url:"deleteRoomType.do",
			data : {
				"id" : id,
			},
			dataType : "text",
			success : function(result) {
				if (result == "1") {
					alert("删除房型成功")
					$("#"+id+"").remove();
				} else {
					alert("删除房型失败")
				}
			},
			error : function() {
				alert("系统故障")
			}

		})	
}

//模态框显示
function showRoomType(id){
	
	$.ajax({
		type:"post",
		url:"selectRoomTypeByid.do",
		data:{
			"id":id,
		},
		
		success:function(result){
			
			stus = JSON.parse(result)
			var stu = "";
			
			for(var i = 0; i < stus.length; i++ ){
				
				stu += "<tr><td>房型</td>";
				stu += "<td><input type='text' value='"+stus[i].housetype+"' class='form-control' id='housetype2' placeholder='请输入房型名称'>";
				stu +="<input value='"+stus[i].id+"' type='hidden' id='typeid' ></td></tr>"
				stu += "<tr><td>容纳人数</td>";
				stu += "<td><input type='text' value='"+stus[i].galleryful+"' class='form-control' id='peple2' placeholder=''></td></tr>";
				stu += "<tr><td>床位数</td>";
				stu += "<td><input type='text' value='"+stus[i].bednum+"' class='form-control' id='bed2' placeholder='请输入床位数'></td></tr>";
				stu += "<tr><td>价格</td>";
				stu += "<td><input type='text' value='"+stus[i].reserved1+"' class='form-control' id='price2' placeholder='请输入价格'></td></tr>";
				stu += "<tr><td>备注</td>";
				stu += "<td><textarea rows='3' cols='25' name='remarks' id='remarks2' class='form-control'></textarea></td></tr>";
					
			}
			$("#inftable").html(stu);
		},
		error:function(){
			
		}
	})
	
}

function amendRoomType(){
	
	var housetype = $("#housetype2").val();
	var id = $("#typeid").val();
	var peple = $("#peple2").val();
	var bed = $("#bed2").val();
	var price = $("#price2").val();
	var remarks = $("#remarks2").val();
	
	$.ajax({
		type:"post",
		url:"amendRoomType.do",
		data:{
			"housetype":housetype,
			"id":id,
			"peple":peple,
			"bed":bed,
			"price":price,
			"remarks":remarks,
		},
		success:function(result){
			
			if(result == "1"){
				alert("修改成功")
			}else{
				alert("修改失败")
			}
			
		},
		error:function(){
			alert("系统故障")
		}
	})
	
}

</script>

<body>
	
	<div style="border-width: 10px;border-color: beige;border-style: double;
		border-radius: -webkit-calc(background-color: );padding: 10px;margin:10px;left: 200px; top: 100px; width: 1180px;height: 600px">
		
		<hr><h4 align="center" style="color: #4981F8;" align="center">房型管理</h4><hr><br><br>

		<div
			style="position: absolute; left: 100px; top: 150px; width: 310px; height: 10px">
			<form class="form-inline" id="myFrom">

				<table class="table table-bordered">
					<tr>
						<td>房型</td>
						<td><input type="text" class="form-control"
							id="housetype" placeholder="请输入房型名称"></td>
					</tr>
					<tr>
						<td>容纳人数</td>
						<td><input type="text" class="form-control"
							id="peple" placeholder=""></td>
					</tr>
					<tr>
						<td>床位数</td>
						<td><input type="text" class="form-control"
							id="bed" placeholder="请输入床位数"></td>
					</tr>
					<tr>
						<td>价格</td>
						<td><input type="text" class="form-control" 
							id="price" placeholder="请输入价格"></td>
					</tr>
					<tr>
						<td>备注</td>
						<td><textarea rows="3" cols="25" name="remarks" id="remarks"
								class="form-control"></textarea></td>
					</tr>
				</table>

				<button type="reset" form="myFrom" class="btn btn-danger">重置</button>
				<button onclick="addRoomtype()" class="btn btn-success">添加房型</button>
			</form>
		</div>

		<div
			style="position: absolute; left: 600px; top: 150px; width: 500px; height: 10px">
			<table class="table table-bordered">
				<tr>
					<th>房型</th>
					<th>容纳人数</th>
					<th>床位数</th>
					<th>价格</th>
					<th>备注</th>
					<th>操作</th>
				</tr>
				<c:forEach items="${houselist}" var="roomtype">
				<tr id="${roomtype.id}">
					<td>${roomtype.housetype}</td>
					<td>${roomtype.galleryful}</td>
					<td>${roomtype.bednum}</td>
					<td>${roomtype.reserved1}￥</td>
					<td>${roomtype.remark}</td>
					<td>
					<a href="#" onclick="deleteRoomType('${roomtype.id}')">删除</a>
					<a href="#" onclick="showRoomType('${roomtype.id}')" data-toggle="modal" data-target="#myModal">修改</a>
					</td>
				</tr>
				</c:forEach>
			</table>


		</div>

	</div>
	
					<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
					</div>
					<div id="myModalLabel">
					<table class="table table-bordered" id="inftable">
					
				</table>
					</div>
				
					   <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button onclick="amendRoomType()" class="btn btn-success">修改</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	
</body>
</html>